<template>
	<view>
		<view class="top">
			<view class="pic">
				<image class="bg" src="https://cdn3.axureshop.com/demo/2116044/images/%E6%88%91%E7%9A%84%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u3877.png"></image>
				<!-- 登录状态下首页 -->
				<view class="my" v-if="status==1" >
					<view>
						<image class="tx" src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u612.png"></image>
					</view>
					<view class="mymsg">
						<view>
							<text>Daisy</text>
							<text>普通会员</text>
						</view>
						<view>
							<text>156****3499</text>
						</view>
					</view>
					<view class="fewm">
						<image @click="menber_code" class="ewm" src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u610.png"></image>
					</view>
				</view>
				<!-- 未登录状态下首页 -->
				<view class="my" v-if="status==0">
					<view class="nomytx">
						<image class="notx" src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u1505.png"></image>
					</view>
					<view @click="nologin_menber" class="mymsg">
						登录
					</view>
					<view class="no">
						<image class="go" src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="cen" v-if="status==1">
			<view>
				<view>
					<text>￥</text>
					<text class="num">1200.0</text>
				</view>
				<text class="word">余额</text>
			</view>
			<view>
				<text class="num">4</text>
				<text class="word">优惠券</text>
			</view>
			<view>
				<text class="num">200</text>
				<text class="word">积分</text>
			</view>
		</view>
		<view class="bot">
			<view>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u900.png"></image>
				<text>消息</text>
				<view class="msgsum" v-if="status==1">
					<text style="color: white;">3</text>
				</view>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png">
				</image>
			</view>
			<view>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u904.png"></image>
				<text>地址管理</text>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png"></image>
			</view>
			<view>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u908.png"></image>
				<text>练习客服</text>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png"></image>
			</view>
			<view @click="mymsg">
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u912.png"></image>
				<text>个人信息</text>
				<image src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:'1'
			}
		},
		methods: {
			mymsg(){
				uni.navigateTo({
					url:'/pages/mymsg/mymsg'
				})
			}
		}
	}
</script>

<style>
.pic{
	position: relative;
}
.bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 300rpx;
	background-color: rgba(246, 234, 227, 1);
	
}
.my{
	position: absolute;
	width: 690rpx;
	height: 120rpx;
	top:250rpx;
	background-color: #ffffff;
	margin-left: 30rpx;
	display: flex;
	align-items: center;
}
.tx{
	
	width: 120rpx;
	height: 120rpx;
	text-align: center;
}

.ewm{
	width: 40rpx;
	height: 40rpx;
}
.nomytx{
	margin-top: 8rpx;
	width: 120rpx;
	height: 120rpx;
	text-align: center;
	border-radius: 50%;
	background-color: #f8f8f8;
	display: flex;
	justify-content: center;
	align-items: center;
}
.notx{
	width: 50rpx;
	height: 65rpx;
}
.go{
	width: 15rpx;
	height: 30rpx;
}
.mymsg{
	display: flex;
	flex-direction: column;
	color: #333333;
	font-size: 34rpx;
}
.nomytx .mymsg{
	width: 80rpx;
	flex: auto;
}
.my>view:nth-child(1){
	margin-left: 30rpx;
	width: 120rpx;
}
.my>view:nth-child(2){
	flex: 1;
	margin-left: 15rpx;
}
.my>view:nth-child(3){
	width: 40rpx;
	margin-right: 30rpx;
}
.mymsg view:first-child text:first-child{
	font-size: 46rpx;
	font-weight: 650;
	margin: 0 20rpx 20rpx 0;
}
.mymsg view:first-child text:last-child{
	font-size: 26rpx;
	background-color: rgba(247, 114, 20, 1);
	border-radius: 10rpx;
	padding: 3rpx 8rpx;
	color: #ffffff;
	margin: 10rpx 20rpx 20rpx 0;
}
.mymsg view:last-child text{
	font-size: 22rpx;
	color: #999999;
	margin-right: 25rpx;
	
}
.cen{
	position: absolute;
	width: 650rpx;
	margin-top: 400rpx;
	height: 150rpx;
	margin-left: 50rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cen>view{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.cen view view{
	padding-bottom: 20rpx;
}
.num{
	font-size: 48rpx;
	font-weight: 650;
	padding-bottom: 20rpx;
}
.word{
	font-size: 22rpx;
	color: #999999;
}
.bot{
	position: absolute;
	width: 690rpx;
	margin-top: 550rpx;
	margin-left: 30rpx;
}
.bot>view{
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(242, 242, 242, 1);
}
.bot view image:first-child{
	width: 35rpx;
	height: 35rpx;
	margin-left: 20rpx;
	margin-right: 15rpx;
}
.bot view image:last-child{
	width: 15rpx;
	height: 30rpx;
	margin-right: 40rpx;
	margin-left: 30rpx;
}
.bot>view text{
	flex: 1;
	color: #333333;
	font-size: 28rpx;
}
.msgsum{
	width: 30rpx;
	text-align: center;
	background-color: rgba(247, 114, 20, 1);
	font-weight: 600;
	border-radius: 50%;
}



</style>
